<template>
  <div class="animate-fadeIn">
    <div class="mb-6">
      <h2 class="text-2xl font-bold cyber-text mb-2">创建/更新测试用例</h2>
      <p class="text-gray-400">新建或编辑测试用例</p>
    </div>
    
    <div class="glass-effect rounded-xl p-6 tech-card">
      <form @submit.prevent="handleSubmit" class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">用例名称</label>
            <input 
              v-model="formData.name"
              type="text" 
              required
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
              placeholder="输入用例名称"
            >
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">优先级</label>
            <select 
              v-model="formData.priority"
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
              <option value="高">高</option>
              <option value="中">中</option>
              <option value="低">低</option>
            </select>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">测试类型</label>
            <select 
              v-model="formData.type"
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
              <option value="功能测试">功能测试</option>
              <option value="性能测试">性能测试</option>
              <option value="安全测试">安全测试</option>
              <option value="兼容性测试">兼容性测试</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-300 mb-2">执行环境</label>
            <select 
              v-model="formData.environment"
              class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            >
              <option value="开发环境">开发环境</option>
              <option value="测试环境">测试环境</option>
              <option value="预生产环境">预生产环境</option>
              <option value="生产环境">生产环境</option>
            </select>
          </div>
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">用例描述</label>
          <textarea 
            v-model="formData.description"
            rows="4" 
            class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            placeholder="详细描述测试用例的目标和步骤"
          ></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">前置条件</label>
          <textarea 
            v-model="formData.preconditions"
            rows="3" 
            class="w-full px-4 py-3 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue neon-border transition-all"
            placeholder="执行测试前需要满足的条件"
          ></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-300 mb-2">测试步骤</label>
          <div class="space-y-3">
            <div 
              v-for="(step, index) in formData.steps"
              :key="index"
              class="flex items-center space-x-3"
            >
              <span class="text-tech-blue font-mono">{{ index + 1 }}.</span>
              <input 
                v-model="step.description"
                type="text"
                class="flex-1 px-4 py-2 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue"
                placeholder="测试步骤描述"
              >
              <input 
                v-model="step.expected"
                type="text"
                class="flex-1 px-4 py-2 border border-gray-600 rounded-lg bg-gray-800/50 text-white focus:outline-none focus:ring-2 focus:ring-tech-blue"
                placeholder="预期结果"
              >
              <button 
                type="button"
                @click="removeStep(index)"
                class="text-red-400 hover:text-red-300 transition-colors"
              >
                <i class="fas fa-trash"></i>
              </button>
            </div>
            <button 
              type="button"
              @click="addStep"
              class="flex items-center text-tech-blue hover:text-tech-purple transition-colors"
            >
              <i class="fas fa-plus mr-2"></i>添加测试步骤
            </button>
          </div>
        </div>
        
        <div class="flex justify-end space-x-4">
          <button 
            type="button" 
            @click="resetForm"
            class="px-6 py-3 border border-gray-600 text-gray-300 rounded-lg hover:bg-gray-700 transition-colors"
          >
            重置
          </button>
          <button 
            type="submit" 
            class="cyber-button px-6 py-3 text-white rounded-lg hover-glow transition-all duration-200"
          >
            保存用例
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

interface TestStep {
  description: string
  expected: string
}

interface TestCaseData {
  name: string
  priority: string
  type: string
  environment: string
  description: string
  preconditions: string
  steps: TestStep[]
}

const router = useRouter()

const formData = reactive<TestCaseData>({
  name: '',
  priority: '中',
  type: '功能测试',
  environment: '测试环境',
  description: '',
  preconditions: '',
  steps: [{ description: '', expected: '' }]
})

const addStep = () => {
  formData.steps.push({ description: '', expected: '' })
}

const removeStep = (index: number) => {
  if (formData.steps.length > 1) {
    formData.steps.splice(index, 1)
  }
}

const resetForm = () => {
  Object.assign(formData, {
    name: '',
    priority: '中',
    type: '功能测试',
    environment: '测试环境',
    description: '',
    preconditions: '',
    steps: [{ description: '', expected: '' }]
  })
}

const handleSubmit = () => {
  console.log('保存测试用例:', formData)
  // 这里可以调用 API 保存数据
  alert('测试用例保存成功！')
  router.push('/test/cases')
}
</script>

